// src/pages/Fen.jsx
import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { fadeIn } from '../styles/animations';
import FortuneCard from '../components/FortuneCard';
import axios from '../api/axios';
import { getConstellation } from '../utils/storage';

const constellations = [
  { label: '白羊座', key: 'aries' },
  { label: '金牛座', key: 'taurus' },
  { label: '双子座', key: 'gemini' },
  { label: '巨蟹座', key: 'cancer' },
  { label: '狮子座', key: 'leo' },
  { label: '处女座', key: 'virgo' },
  { label: '天秤座', key: 'libra' },
  { label: '天蝎座', key: 'scorpio' },
  { label: '射手座', key: 'sagittarius' },
  { label: '摩羯座', key: 'capricorn' },
  { label: '水瓶座', key: 'aquarius' },
  { label: '双鱼座', key: 'pisces' },
];

const Fen = () => {
  const [fortuneData, setFortuneData] = useState(null);
  const [selectedConstellation, setSelectedConstellation] = useState(getConstellation() || 'aries');

  useEffect(() => {
    const fetchFortune = async () => {
      try {
        const response = await axios.post('/api/custom/tis/constellation', { type: selectedConstellation });
        if (response.data.code === 200) {
          setFortuneData(response.data.data);
        }
      } catch (error) {
        console.error('获取占卜数据失败:', error);
      }
    };

    fetchFortune();
  }, [selectedConstellation]); // 依赖于选中的星座

  const handleConstellationChange = (event) => {
    setSelectedConstellation(event.target.value);
  };

  return (
    <motion.div 
      className="fortune-page"
      style={{
        height: 'auto',
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: '#F9FAFB',
        position: 'relative',
        overflow: 'auto',
      }}
      initial="hidden"
      animate="visible"
      exit="exit"
      variants={fadeIn}
    >
      <div 
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundImage: 'url(/constellation-background.png)', // 使用绝对路径
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          opacity: 0.15,
          zIndex: 1,
          pointerEvents: 'none',
        }}
      />
      <div className="flex-grow p-4" style={{ position: 'relative', zIndex: 2 }}>
        <div className="mb-4">
          <label htmlFor="constellation-select" className="block text-lg font-semibold mb-2">选择星座:</label>
          <select
            id="constellation-select"
            value={selectedConstellation}
            onChange={handleConstellationChange}
            className="p-2 border border-gray-300 rounded"
            style={{ fontSize: '0.3rem' }}
          >
            {constellations.map((constellation) => (
              <option key={constellation.key} value={constellation.key}>
                {constellation.label}
              </option>
            ))}
          </select>
        </div>
        {fortuneData ? <FortuneCard fortuneData={fortuneData} /> : <p>加载中...</p>}
      </div>
    </motion.div>
  );
};

export default Fen;